<template>
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card shadow-sm">
          <div class="card-header bg-primary text-white">
            <h4 class="mb-0">订单支付</h4>
          </div>
          <div class="card-body p-4">
            <div class="alert alert-info mb-4">
              <h5 class="alert-heading">订单信息</h5>
              <div class="row">
                <div class="col-md-4">
                  <p class="mb-1"><strong>订单号:</strong></p>
                  <p class="mb-3">{{ orderTradeNo }}</p>
                </div>
                <div class="col-md-4">
                  <p class="mb-1"><strong>支付金额:</strong></p>
                  <p class="mb-3 text-danger fw-bold">¥{{ orderAmount }}</p>
                </div>
                <div class="col-md-4">
                  <p class="mb-1"><strong>订单状态:</strong></p>
                  <p class="mb-3">
                    <span class="badge bg-warning">待支付</span>
                  </p>
                </div>
              </div>
            </div>
            
            <div class="payment-methods mb-4">
              <h5 class="mb-3">支付方式</h5>
              <div class="row justify-content-center">
                <div class="col-md-6 col-lg-5">
                  <div class="card payment-method-card selected">
                    <div class="card-body text-center py-3">
                      <i class="bi bi-credit-card fs-1 text-primary"></i>
                      <p class="mb-0 mt-2 fw-bold">支付宝</p>
                      <p class="small text-muted mt-1">当前仅支持支付宝支付</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="d-grid gap-2">
              <button 
                type="button" 
                class="btn btn-primary btn-lg" 
                @click="confirmPayment" 
                :disabled="isProcessing"
              >
                <span v-if="isProcessing" class="spinner-border spinner-border-sm me-2" role="status"></span>
                {{ isProcessing ? '处理中...' : '确认支付' }}
              </button>
              <button type="button" class="btn btn-outline-secondary" @click="cancelPayment">取消支付</button>
            </div>
            
            <div class="alert alert-danger mt-3" v-if="errorMessage">
              {{ errorMessage }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderService } from '../api';

export default {
  name: "Payment",
  data() {
    return {
      orderId: null,
      orderTradeNo: '',
      orderAmount: '',
      paymentMethod: 'alipay', // 默认使用支付宝
      isProcessing: false,
      errorMessage: ''
    }
  },
  created() {
    // 从路由参数中获取订单信息
    const { order_id, order_trade_no, amount } = this.$route.query;
    
    if (!order_id || !order_trade_no || !amount) {
      this.errorMessage = '订单信息不完整，请返回重试';
      return;
    }
    
    this.orderId = order_id;
    this.orderTradeNo = order_trade_no;
    this.orderAmount = amount;
  },
  methods: {
    async confirmPayment() {
      this.isProcessing = true;
      this.errorMessage = '';
      
      try {
        // 调用API获取支付链接
        const response = await orderService.createPayUrl(this.orderTradeNo);
        
        if (response.success && response.data && response.data.pay_url) {
          // 重定向到支付页面
          window.location.href = response.data.pay_url;
        } else {
          this.errorMessage = response.message || '获取支付链接失败，请稍后重试';
        }
      } catch (error) {
        console.error('支付请求失败:', error);
        this.errorMessage = '支付请求异常，请稍后重试';
      } finally {
        this.isProcessing = false;
      }
    },
    cancelPayment() {
      // 返回充值页面
      this.$router.push('/recharge');
    }
  }
}
</script>

<style scoped>
.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.payment-method-card {
  transition: all 0.2s ease;
  border: 2px solid #0d6efd;
  background-color: rgba(13, 110, 253, 0.05);
}

.payment-method-card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style> 
